<template>
  <nm-container>
    <el-form label-width="100px" :inline="true" style="background:white;padding-top:20px">
      <el-form-item label="线路名称：" prop="route_name">
        <el-input v-model="list.model.route_name" clearable />
      </el-form-item>
      <nm-button type="primary" icon="search" @click="getData" text="查询" style="margin-left:20px"></nm-button>
      <nm-button type="info" @click="refreshData">
        <nm-icon name="refresh"></nm-icon>
        重置
      </nm-button>
      <nm-button v-bind="buttons.add" @click="add" />
    </el-form>

    <el-table
      ref="topictable"
      :max-height="tabheight"
      :data="getList.rows"
      border
      align="center"
      :header-cell-style="{ 'text-align': 'center', 'font-weight': 'bold', color: '#030202' }"
      :cell-style="{ 'text-align': 'center' }"
      style="width: 100%;text-align: center;"
    >
      <el-table-column label="#" type="index" width="50"> </el-table-column>
      <el-table-column prop="stationName" label="所属车站" width="180"> </el-table-column>
      <el-table-column prop="lineName" label="线路名称" width="220"> </el-table-column>
      <el-table-column prop="startStationName" label="起始站" width="180"> </el-table-column>
      <el-table-column prop="endStationName" label="终点站" width="180"> </el-table-column>
      <el-table-column prop="simpleSpelling" label="简拼"> </el-table-column>
      <!-- <el-table-column prop="start_stationid" label="起始站编号" width="180">
      </el-table-column>
      <el-table-column prop="end_Stationid" label="终点站编号" width="180">
      </el-table-column> -->

      <el-table-column prop="direction" label="线路方向"> </el-table-column>
      <el-table-column label="线路类型">
        <template slot-scope="scope">
          <span>{{ scope.row.lineType == '1' ? '高速' : scope.row.lineType == '2' ? '普通' : '其它' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="线路等级" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.grade == '1' ? '一类客运班线' : scope.row.grade == '2' ? '二类客运班线' : scope.row.grade == '3' ? '三类客运班线' : '四类客运班线' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="mileage" label="里程（KM）" width="100"> </el-table-column>
      <el-table-column prop="status" label="状态" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.status == true ? '启用' : '禁用' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="runTime" label="运行时长(小时)" width="120"> </el-table-column>

      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <nm-button type="text" icon="search" @click="showdetail(scope.row)" text="明细"></nm-button>
          <nm-button v-bind="buttons.edit" @click="edit(scope.row)" />
          <nm-button-delete v-bind="buttons.del" :id="scope.row.id" :action="removeAction" @success="refresh" />
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="paginationChange2" background layout="prev, pager, next" :total="getList.total" />
    <!-- 线路明细 -->
    <el-dialog title="线路明细" :visible.sync="listShow" width="85%" style="margin-left:10%">
      <el-button type="primary" @click="addLine">新增线路明细</el-button>
      <el-table :data="gridData.rows" align="center" :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }" style="width: 100%;text-align: center;">
        <el-table-column property="section_serial" label="序号"></el-table-column>
        <el-table-column property="mileage" label="公里（KM）"></el-table-column>
        <el-table-column property="station_type" label="站点类型"></el-table-column>
        <el-table-column property="section_name" label="站点名称"></el-table-column>
        <el-table-column property="creator" label="创建人"></el-table-column>
        <el-table-column property="createdTime" label="创建时间"></el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="lineEdit(scope.row)">编辑</el-button>
            <el-button type="text" @click="lineDele(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination @current-change="paginationChange" background layout="prev, pager, next" :total="gridData.total" /> -->
    </el-dialog>

    <save-page :id="curr.id" :organizationList="organizationList" :selectid="selectid" :stationList="stationList" :endList="endList" :visible.sync="dialog.save" @success="refresh" />
    <el-dialog title="操作" :visible.sync="dialogTableVisible" width="50%" top="15%" style="margin-left:10%">
      <detail-list :stationList="stationList" v-on:childByValue="childByValue" :routeId="routeId" :endList="endList" :editCode="editCode" :lineMessage="lineMessage" />
    </el-dialog>
  </nm-container>
</template>
<script>
import { mixins } from 'netmodular-ui'
import page from './page'
import cols from './cols'
import SavePage from '../components/save'
import detailList from '../components/detailList'

const api = $api.dispatch.route_Info

export default {
  name: page.name,
  mixins: [mixins.list],
  components: { SavePage, detailList },
  data() {
    return {
      selectid: '',
      organizationList: [],
      endList: [],
      editCode: '',
      listShow: false,
      dialogTableVisible: false,
      list: {
        title: page.title,
        cols,
        action: api.query,
        model: {
          /** 线路名称 */
          route_name: ''
        }
      },
      getList: [],
      stationList: [],
      gridData: {},
      lineMessage: {},
      removeAction: api.remove,
      buttons: page.buttons,
      routeId: '',
      tabheight: 400,
      pageIndex: 1
    }
  },
  mounted() {
    console.log(JSON.parse(localStorage.getItem('userMsg')))
    this.$nextTick(() => {
      this.tabheight = window.innerHeight - this.$refs.topictable.$el.offsetTop - 150
    })
    this.getData()
    this.getStation()
    this.targetQuery()
    this.organization()
  },
  methods: {
    paginationChange2(val) {
      this.pageIndex = val
      this.getData()
    },
    addLine() {
      this.editCode = 2
      this.lineMessage = {}
      this.dialogTableVisible = true
    },
    childByValue(i, n) {
      this.dialogTableVisible = i
      // if (n != 1) {
      this.getLineData()
      // }
    },
    showdetail(row) {
      this.routeId = row.id
      this.getLineData()
      this.listShow = true
    },
    refreshData() {
      this.list.model = {}
    },
    refresh() {
      this.getData()
    },
    getData() {
      this.list.model['Page.Index'] = this.pageIndex
      this.list.model['Page.Size'] = 10
      api.querylineinfos(this.list.model).then(res => {
        this.getList = res
      })
    },
    // 线路明细列表
    getLineData() {
      $api.dispatch.route_section.query({ route_id: this.routeId }).then(res => {
        this.gridData = res
      })
    },
    lineEdit(row) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      $api.dispatch.route_section.edit(row.id).then(res => {
        this.editCode = 1
        this.lineMessage = res
        loading.close()
        this.dialogTableVisible = true
      })
    },
    lineDele(row) {
      const that = this
      this.$confirm('确定删除该线路明细吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          $api.dispatch.route_section.remove(row.id).then(res => {
            that.$message({
              type: 'success',
              message: '删除成功!'
            })
            that.getLineData()
          })
        })
        .catch(e => {})
    },
    // 目的地列表
    targetQuery() {
      api.targetQuery().then(res => {
        this.endList = res.rows.map(i => {
          return { value: i.id, label: i.name }
        })
      })
    },
    // 起始站列表
    getStation() {
      api.stationQuery().then(res => {
        this.stationList = res.rows.map(i => {
          return { value: i.id, label: i.station_name }
        })
      })
    },
    // 所属车站
    getstartstationList(data) {
      const that = this
      if (JSON.parse(localStorage.getItem('userMsg')).userName == 'admin') {
        that.organizationList = data
        return
      }
      if (data) {
        api.getstartstation().then(res => {
          console.log(res)
          console.log(data)
          data.forEach(e => {
            if (e.label == res[0].name) {
              that.organizationList = [e]
              that.selectid = e.value
            }
          })
        })
      } else {
        that.tableData = []
      }
    },
    // 组织架构车站
    organization() {
      api.organizationQuery().then(res => {
        var arr = res.rows.map(i => {
          return { value: i.code, label: i.name }
        })
        this.getstartstationList(arr)
      })
    }
  }
}
</script>
